@import '~styles/varibles.styl'
@import '~styles/mixins.styl'
.title
  position: relative
  width: 250px
  height: 30px
  line-height: 30px
  color: #4dd5ff
  background: linear-gradient(to right, #1867a6 0%, #1867a6 10%,rgba(17, 77, 135, 0) 100%)
  margin-left: 15px
  letter-spacing: 2px
  text-shadow: 0 1px 0 rgba(0, 0, 0, .4)
  span
    color: #ffd243
  i
    font-size: 12px
    color: $mainColor
    opacity: .6
    padding-left: 10px
  .warn
    color: #ffe98f
    opacity: 1
  .percent
    float: right
    letter-spacing: 1
    height: 30px
    line-height: 30px
  em
    display: inline-block
    width: 21px
    height: 21px
    vertical-align: middle
    margin: -3px -8px 0 -10px
    transform: rotate(45deg)
    background: linear-gradient(45deg, #124f8d 0%, #1867a6 50%, rgba(0, 0, 0, 0) 51%, rgba(0, 0, 0, 0) 100%)
    border: solid #288ee0
    border-width: 0 0 1px 1px
.title:before, .title:after
  content: ''
  position:absolute
  top: 0
  left: 0
  width: 100%
  height: 1px
  background: linear-gradient(to right, #227dc2 0%,rgba(17, 77, 135, 0) 100%)
.title:after
  top: auto
  bottom: 0
.tips
  position: relative
  padding:0 10px
  height:28px
  line-height:29px
  font-size: 12px
  text-align: center
  i
    margin-right: 5px
.tips:before
  content: ''
  position: absolute
  left: 0
  top: 0
  width: 100%
  height: 8px
  border: solid #1567ac
  border-width: 1px 1px 0 1px
.tips:after
  content: ''
  position: absolute
  left: 0
  bottom: 0
  width: 100%
  height: 8px
  border: solid #1567ac
  border-width: 0 1px 1px 1px
.btn1
  cursor: pointer
  font-size: 14px
  border-radius: 4px
  height: 30px
  line-height: 30px
  padding: 0 10px
  color: #4dd5ff
  border: 1px solid #2f8ae6
  background: linear-gradient(to right, rgba(26, 123, 191, .8) 0%, rgba(20, 49, 123, .8) 100%)
  i
    display: inline-block
    margin-right: 4px
    height: 14px
    line-height: 14px
.btn1:hover
  transition: all .3s
  box-shadow: 0 0px 5px rgba(255, 255, 255, .4)

.loading
  animation:1s linear 0s rotate infinite

@keyframes rotate {
  from {
    transform: rotate(0deg)
  }
  to {
    transform: rotate(360deg)
  }
}

.aRow
  div:nth-child(1)
    h3
      float: left
      line-height: 30px
      margin-right: 10px
    div
      float: left
      margin-top: -10px
  .echarts-box
    margin-top: 0!important

.rowDiv
  overflow: hidden
  margin-bottom: -10px
  h3
    float: left
    line-height: 30px
    margin-right: 10px
.rowDiv > div
  float: left
  margin-top: -20px

.bgLight
  animation: halo 5s linear 0s infinite alternate
  
@keyframes halo {
  from {
    transform: scale(1.5)
  }
  to {
    transform: scale(1)
  }
}

.float
  float: left
  margin-right: 20px

.pointTitle
  height: 30px
  line-height: 30px
  color: #ffd243
.pointTitle:before
  content: "\e640"
  padding-right: 5px

.locationTitle
  height: 30px
  line-height: 30px
  color: #ffd243
.locationTitle:before
  content: "\e633"
  font-size: 20px
  vertical-align: middle
  padding-right: 5px
  
.noData
  width: 100%
  height: 100%
  position: relative
  img
    position: absolute
    top: 50%
    left: 50%
    transform:translate(-50%,-50%);
    margin-top: -30px;
  p
    width: 100%;
    text-align: center
    position: absolute
    top: 50%
    left: 50%
    transform:translate(-50%,-50%);
    margin-top: 30px;
    padding: 10px 0
    color: #4dd5ff
  &.bg
    background: rgba(255, 255, 255, 0)